<template>
  <el-dialog
    class="enterprice"
    :visible.sync="dialogVisible"
    center
    width="600px"
  >
    <div slot="title" class="title">
      {{ mode === 'add' ? '新增企业' : '编辑企业' }}
    </div>
    <el-form
      ref="enterpriceFormRef"
      :model="enterpriceForm"
      :rules="enterpriceRules"
      label-width="100px"
    >
      <el-form-item label="企业编号" prop="eid">
        <el-input v-model="enterpriceForm.eid"></el-input>
      </el-form-item>
      <el-form-item label="企业名称" prop="name">
        <el-input v-model="enterpriceForm.name"></el-input>
      </el-form-item>
      <el-form-item label="企业简称" prop="short_name">
        <el-input v-model="enterpriceForm.short_name"></el-input>
      </el-form-item>
      <el-form-item label="企业简介" prop="intro">
        <el-input v-model="enterpriceForm.intro"></el-input>
      </el-form-item>
      <el-form-item label="企业备注">
        <el-input v-model="enterpriceForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { addEnterprise, updateEnterprise } from '@/api/enterprise'
@Component({})
export default class Enterprise extends Vue {
  @Prop({ type: String, default: 'add' }) mode?: string
  declare dialogVisible: boolean
  declare enterpriceForm: {
    eid: string; // 企业编号
    name: string; // 企业名称
    short_name: string; // 企业简称
    intro: string; // 企业简介
    remark: string; // 企业备注
  }

  data() {
    return {
      dialogVisible: false, // 显示或是隐藏
      enterpriceForm: {
        eid: '', // 企业编号
        name: '', // 企业名称
        short_name: '', // 企业简称
        intro: '', // 企业简介
        remark: '' // 企业备注
      },
      enterpriceRules: {
        eid: [{ required: true, message: '请输入企业编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        short_name: [
          { required: true, message: '请输入企业简称', trigger: 'blur' }
        ],
        intro: [{ required: true, message: '请输入企业简介', trigger: 'blur' }]
      }
    }
  }
  @Watch('dialogVisible')
  dialogVisibleChange() {
    this.$refs.enterpriceFormRef &&
      (this.$refs.enterpriceFormRef as any).clearValidate()
  }

  submit() {
    ;(this.$refs.enterpriceFormRef as any).validate(async (valid: boolean) => {
      if (!valid) return

      let res = null
      if (this.mode === 'add') {
        // 新增
        res = await addEnterprise(this.enterpriceForm)
      } else {
        // 编辑
        res = await updateEnterprise(this.enterpriceForm)
      }

      if (res.data.code === 200) {
        this.$message.success(this.mode === 'add' ? '新增成功~' : '编辑成功~')

        // 关闭当前窗口
        this.dialogVisible = false

        // 调用父组件的search方法
        ;(this.$parent as any).search()
      }
    })
  }
}
</script>

<style lang="scss">
.enterprice {
  .el-dialog__header {
    padding: 0px;
  }
  .title {
    text-align: center;
    color: #fff;
    background-color: #0e9ff9;
    height: 53px;
    line-height: 53px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: white;
  }
}
</style>
